<template>
    <view class="globe_back">
        <view style="height: 16px"></view>
        <view v-if="status==-1||status==1">
            <view class="back_fff br_16 p_32 m_16">
                <!-- 店铺名称 -->
                <view class="flex">
                    <view class="from-title-box title">
                        <text class="f_28 cl_333A47">店铺名称</text>
                    </view>
                    <view class="flex_1 line_F7FAFF from-title-box">
                        <input
                            class="f_28 cl_00091A pb_16"
                            v-model="formData.name"
                            placeholder-class="cl_CCCED1"
                            cursor-spacing="100px"
                            type="text"
                            value=""
                            placeholder="请填写店铺名称"
                        />
                    </view>
                </view>
                <!-- 联系电话 -->
                <view class="flex mt_24">
                    <view class="from-title-box title">
                        <text class="f_28 cl_333A47">联系电话</text>
                    </view>
                    <view class="flex_1 line_F7FAFF from-title-box">
                        <input
                            class="f_28 cl_00091A pb_16"
                            v-model="formData.mobile"
                            placeholder-class="cl_CCCED1"
                            cursor-spacing="100px"
                            type="number"
                            value=""
                            placeholder="请填写您的联系电话"
                        />
                    </view>
                </view>
                <!-- 入驻类型 -->
                <u-picker :show="show" :columns="columns" keyName="title" @cancel="cancel" @confirm="confirm"></u-picker>
                <view class="flex mt_24">
                    <view class="from-title-box title">
                        <text class="f_28 cl_333A47">入驻类型</text>
                    </view>
                    <view class="flex line_F7FAFF from-title-box align_items_center justify_content_between" style="width: 80%" @click="show = true">
                        <input class="f_28 cl_00091A pb_16" disabled placeholder-class="cl_CCCED1" v-model="typeName" type="number" value="" placeholder="请选择入驻类型" />
                        <image class="img_32" src="https://jiuyuan.smomotbo.com/static/imgs/query-info/next-icon.png" mode=""></image>
                    </view>
                </view>
                <!-- 店铺地址 -->
                <view class="flex mt_24">
                    <view class="from-title-box title">
                        <text class="f_28 cl_333A47">店铺地址</text>
                    </view>
                    <view class="flex line_F7FAFF from-title-box align_items_center justify_content_between" style="width: 80%" @click="report_map">
                        <input
                            class="f_28 cl_00091A pb_16"
                            disabled
                            placeholder-class="cl_CCCED1"
                            v-model="formData.full_address"
                            type="number"
                            value=""
                            placeholder="请选择店铺地址"
                        />
                        <image class="img_32" src="https://jiuyuan.smomotbo.com/static/imgs/me-report/posi-icon.png" mode=""></image>
                    </view>
                </view>
            </view>
            <!-- 店铺头像 -->
            <view class="back_fff br_16 p_32 m_16 mt_32">
                <view class="flex">
                    <view class="from-title-box title">
                        <text class="f_28 cl_333A47">店铺头像</text>
                    </view>
                    <view class="imm_imgbox">
                        <!-- <view class="imm_img">
							<image class="img_140" src="img" mode="widthFix"></image>
						</view> -->

                        <!-- <view style="display: inline-block" @click="handleUpload('logo')"> -->
							<u-upload
								:fileList="fileList6"
								@afterRead="afterRead"
								@delete="deletePic"
								name="6"
								multiple
								:maxCount="1"
								width="70"
								height="70"
							>
							<image class="img_140" :src="url+'imgs/addimg.png'" mode="widthFix"></image>
								<!-- <image class="img_526" :src="urls+ 'sfz1.png'" mode=""></image> -->
							</u-upload>
                            
                        <!-- </view> -->
                        <view class="f_20 cl_999CA3">建议上传尺寸为1:1的图片</view>
                    </view>
                </view>
            </view>
            <!-- 营业执照 -->
            <view class="back_fff br_16 p_32 m_16 mt_32">
                <view class="from-title-box title">
                    <text class="f_28 cl_333A47">营业执照</text>
                </view>
                <view class="br_24 mt_16"  style="background: #f7faff; padding: 32rpx 56rpx">
                    <u-upload
                    	:fileList="fileList7"
                    	@afterRead="afterRead"
                    	@delete="deletePic"
                    	name="7"
                    	multiple
                    	:maxCount="1"
                    	width="250"
                    	height="150"
                    >
					   <image class="img_526" :src="url+'imgs/sczj.png'" mode="widthFix"></image>
                    	<!-- <image class="img_526" :src="urls+ 'sfz1.png'" mode=""></image> -->
                    </u-upload>
					
					
                </view>
            </view>
            <!-- 身份证 -->
            <view class="back_fff br_16 p_32 m_16 mt_32">
                <view class="from-title-box title">
                    <text class="f_28 cl_333A47">身份证</text>
                </view>
				<view class="br_24 mt_16"  style="background: #f7faff; padding: 32rpx 56rpx">
				    <u-upload
				    	:fileList="fileList8"
				    	@afterRead="afterRead"
				    	@delete="deletePic"
				    	name="8"
				    	multiple
				    	:maxCount="1"
				    	width="250"
				    	height="150"
				    >
					   <image class="img_526" :src="url+'imgs/sfz1.png'" mode="widthFix"></image>
				    	<!-- <image class="img_526" :src="urls+ 'sfz1.png'" mode=""></image> -->
				    </u-upload>
					
					
				</view>
				<view class="br_24 mt_16"  style="background: #f7faff; padding: 32rpx 56rpx">
				    <u-upload
				    	:fileList="fileList9"
				    	@afterRead="afterRead"
				    	@delete="deletePic"
				    	name="9"
				    	multiple
				    	:maxCount="1"
				    	width="250"
				    	height="150"
				    >
					   <image class="img_526" :src="url+'imgs/sfz2.png'" mode="widthFix"></image>
				    	<!-- <image class="img_526" :src="urls+ 'sfz1.png'" mode=""></image> -->
				    </u-upload>
	
				</view>
            </view>
            <view class="cl_3377FF m_16 f_24">为了您的权益，请您如实认真填写上述相关信息！</view>
            <view class="addBtn back_3377FF br_24 cl_fff mt_24" @click="submit">提交资料</view>
        </view>
        <!-- 审核中 -->
        <view v-if="status == 0">
            <image class="typeImg" :src="url+'imgs/tjshz.png'" mode="widthFix"></image>
            <text class="typeText cl_999CA3 f_28">资料审核中，请耐心等待</text>
        </view>
        <!-- 审核失败 -->
        <view v-if="status == 2">
            <image class="typeImg" :src="url+'imgs/tjshsb.png'" mode="widthFix"></image>
            <text class="typeText cl_999CA3 f_28">资料审核失败，请重新填写</text>
        </view>
        <view style="height: 20px"></view>
    </view>
</template>

<script>
import { upload, merchantApply, merchantCategory, merchantApplyInfo, merchantApplyUpdate } from '@/api';
export default {
    data() {
        return {
            typeIndex: 0, //表单：0，审核中,：1，审核失败：2
            status: -1,
            show: false,
            columns: [],
            typeName: '',
            formData: {
                name: '',
                mobile: '',
                type: 1,
                category: '',
                latitude: '',
                longitude: '',
                full_address: '',
                business_license: '',
                front_idcard: '',
                back_idcard: '',
                logo: ''
            },
			url:'',
			fileList6:[],
			fileList7:[],
			fileList8:[],
			fileList9:[],
			image6:[],
			image7:[],
			image8:[],
			image9:[],
			enter_index:'',
        };
    },
    onLoad() {

		this.$.ajax(1,"POST","user.join_merchant/joinTypeSelect",{},(res)=>{
		  if(res.code==200){
			    	this.columns = [res.data];
		  }else{
		     this.$.ti_shi(res.msg);
		  }
		})
		this.url = this.$.ajax_url2;
		this.$.ajax(1,"POST","index/enter_index",{},(res)=>{
		  if(res.code==200){
			   
				 if(res.data){
					 this.enter_index=res.data
					 this.status=res.data.status
				 }
				 // console.log(this.enter_index,'this.enter_indexthis.enter_indexthis.enter_index')
		  }else{
			   this.$.ti_shi(res.msg);
		  }
		})
    },
    // onShow() {
       
    // },
    methods: {
        confirm(e) {
            console.log(e.value[0]);
            this.typeName = e.value[0].title;
            this.formData.category = e.value[0].id;
            this.show = false;
        },
        cancel() {
            this.show = false;
        },
        handleUpload(field) {
            let that = this;
            uni.chooseImage({
                count: 1,
                sourceType: ['album', 'camera'],
                sizeType: ['original', 'compressed'],
                success: (chooseImageRes) => {
                    console.log('chooseImageRes', chooseImageRes);
                    const path = chooseImageRes.tempFilePaths[0];
                    upload(path, 'image').then(({ data }) => {
                        const { hash } = data.data;
                        that.formData[field] = hash;
                    });
                }
            });
        },
        submit() {
			if(!this.formData.name){
				this.$.ti_shi('请填写店铺名称');
				return;
			}
			if(!this.formData.mobile){
				this.$.ti_shi('请填写联系电话');
				return;
			}
			if(!this.formData.category){
				this.$.ti_shi('请填写入驻类型');
				return;
			}
			if(!this.formData.full_address){
				this.$.ti_shi('请填写店铺地址');
				return;
			}
			if(!this.image6.join(',')){
				this.$.ti_shi('请上传店铺头像');
				return;
			}
			if(!this.image7.join(',')){
				this.$.ti_shi('请上传营业执照');
				return;
			}
			if(!this.image8.join(',')){
				this.$.ti_shi('请上传身份证正面');
				return;
			}
			if(!this.image9.join(',')){
				this.$.ti_shi('请上传身份证反面');
				return;
			}
			let data={
					 // goods_id:this.id,
					 trade_name:this.formData.name,
					 phone:this.formData.mobile,
					 join_type_id:this.formData.category,
					 address:this.formData.full_address,
					 avatar:this.image6.join(','),
					 business_image:this.image7.join(','),
					 id_card_front_image:this.image8.join(','),
					 id_card_back_image:this.image9.join(','),
					 lng:this.formData.longitude,
					 lat:this.formData.latitude,
			   }   
							// console.log(data);return;	
				this.$.ajax(1,"POST","index/enter",data,(res)=>{
				  if(res.code==200){
					   this.$.ti_shi(res.msg);
					   setTimeout(() => {
						uni.navigateBack({
							delta:1
						})
					}, 1000);
				  }else{
					 this.$.ti_shi(res.msg);
				  }
				})
           
        },
        report_map() {
            // let _this = this
            uni.chooseLocation({
                success: (res) => {
                    console.log(res);
                    this.formData.latitude = res.latitude;
                    this.formData.longitude = res.longitude;
                    this.formData.full_address = `${res.address}-${res.name}`;
                    // this.getLocation();
                }
            });
        },
		// 删除图片
		deletePic(event) {
			if(event.name==6){
				this.image6.splice(event.index, 1)
			}
			if(event.name==7){
				this.image7.splice(event.index, 1)
			}
			if(event.name==8){
				this.image8.splice(event.index, 1)
			}
			if(event.name==9){
				this.image9.splice(event.index, 1)
			}
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url,event.name)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url,event_name) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.$.ajax_url+'common/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						if(event_name==6){
							this.image6.push(JSON.parse(res.data).data.url)
						}
						if(event_name==7){
							this.image7.push(JSON.parse(res.data).data.url)
						}
						if(event_name==8){
							this.image8.push(JSON.parse(res.data).data.url)
						}
						if(event_name==9){
							this.image9.push(JSON.parse(res.data).data.url)
						}
						console.log(res,event_name)
						setTimeout(() => {
							resolve(res.data.data)
						}, 1000)
					}
				});
			})
		},
    }
};
</script>

<style scoped lang="scss">
.m_16 {
    margin: 0 16px 16px 16px;
}

.title {
    width: 30%;
}

.Input {
    width: 70%;
}

.addBtn {
    width: 686rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    margin: 24px auto;
}

.typeImg {
    width: 400rpx;
    height: 320rpx;
    margin: 50% auto 20px;
    display: block;
}

.typeText {
    text-align: center;
    margin: 0 auto;
    display: block;
}
</style>
